// 企业设置
<template>
    <div class="enterprise">
      <div class="install-title">
        <div>
          企业名称与logo设置
        </div>
      </div>
      <div class="install-main">
        <ul>
          <!-- 企业名称 -->
          <li class="enterpriseLi-name">
            <div class="enterpriseLi-left">
             <small>*</small> 企业名称：
            </div>
            <div class="enterpriseLi-right">
              <input :class="{grayBorder:isGrayNameVal,blueBorder:isBlueNameVal}" 
              placeholder="最多输入50字节"
              type="text" v-model="nameVal" maxlength="50">
            </div>
          </li>
          <div class="inputTips" :class="{grayText:isGrayNameVal,blueText:isBlueNameVal}">请输入企业名称（最多50字）</div>
          <!-- 企业简称 -->
          <li class="enterpriseLi-name">
            <div class="enterpriseLi-left">
             <small>*</small> 企业简称：
            </div>
            <div class="enterpriseLi-right">
              <input :class="{grayBorder:isGrayEasyVal,blueBorder:isBlueEasyVal}" type="text"
              placeholder="最多输入10字节"
               v-model="easyNameVal" maxlength="10">
            </div>
          </li>
          <div class="inputTips" :class="{grayText:isGrayEasyVal,blueText:isBlueEasyVal}">请输入企业简称（最多10字）</div>
          <!-- 企业电话 -->
          <li class="enterpriseLi-name">
            <div class="enterpriseLi-left">
             <small>*</small> 企业电话：
            </div>
            <div class="enterpriseLi-right">
              <input :class="{grayBorder:isGrayNumVal,blueBorder:isBlueNumVal}" type="number"
              placeholder="最少8位最多11位"
               v-model="numberVal" maxlength="11" minlength="8">
            </div>
          </li>
          <div class="numberTips" :class="{grayText:isGrayNumVal,blueText:isBlueNumVal}">请输入电话（最少8位，最多11位）</div>
          <!-- 企业地址 -->
          <li class="enterpriseLi-name">
            <div class="enterpriseLi-left">
             <small>*</small> 企业地址：
            </div>
            <div class="enterpriseLi-right">
              <input :class="{grayBorder:isGrayAddVal,blueBorder:isBlueAddVal}" type="text" v-model="addressVal">
            </div>
          </li>
          <div class="addressTips" :class="{grayText:isGrayAddVal,blueText:isBlueAddVal}">请输入企业地址</div>
          <!-- 企业logo -->
          <li class="enterpriseLi-logo">
            <div class="enterpriseLi-left">
             <small>*</small> 企业logo：
            </div>
            <div class="enterpriseLi-right">
              <div class="e-l-r-left">
                <img :src="logoImgUrlVal" alt="">
              </div>
              <div class="e-l-r-right">
                <label for="logoFile">
                  上传
                </label>
                <input id="logoFile" type="file" style="display: none;" accept="image/jpeg,image/jpg,image/png,image/bmp,image/gif" v-on:change="fileChange($event)">
                <p class="logoTost" :class="{grayText:isGrayLogoVal,blueText:isBlueLogoVal}">上传尺寸为1:1,建议640*640,大小不超过1M</p>
              </div>
            </div>   
          </li>
          <li class="enterpriseLi-logo">
            <div class="enterpriseLi-left">
             <small>*</small>主页banner：
            </div>
            <div class="enterpriseLi-right">
              <div class="e-l-r-left">
                <img :src="enterImgUrlVal" alt="">
              </div>
              <div class="e-l-r-right">
                <label for="bannerlogofile">
                  上传
                </label>
                <input id="bannerlogofile" accept="image/jpeg,image/jpg,image/png,image/bmp,image/gif" type="file" v-on:change="bannerChange($event)">
                <p class="logoTost" :class="{grayText:isGrayBannerVal,blueText:isBlueBannerVal}">上传尺寸为1:1,建议640*640,大小不超过1M</p>
              </div>
            </div>   
          </li>
          <li class="enterpriseLi-but">
            <div>
              <el-button type="primary" size="medium" @click="updateInfoClick">保存</el-button>
            </div>
          </li>
        </ul>
      </div>
    </div>   
</template>
<script>
import { mapActions } from "vuex";
const crypto = require("crypto");
export default {
  data() {
    return {
      OrgOBj: {}, //企业信息
      advStartTime: "", // 开始时间
      advEndTime: "", // 结束时间
      pickerOptions1: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7;
        }
      }, // 禁止今日之前选择
      enterImgUrlVal: "/static/img/默认图片.png", // 开机启动图
      logoImgUrlVal: "/static/img/默认图片.png", // logo设置
      nameVal: "企业名称", // 企业名称
      isGrayNameVal: true,
      isBlueNameVal: false,
      easyNameVal: "", //企业简称
      isGrayEasyVal: true,
      isBlueEasyVal: false,
      numberVal: "", //企业电话
      isGrayNumVal: true,
      isBlueNumVal: false,
      addressVal: "", //企业地址
      isGrayAddVal: true,
      isBlueAddVal: false,
      isGrayBannerVal: true,
      isBlueBannerVal: false,
      isGrayLogoVal: true,
      isBlueLogoVal: false,
      textVal: "", // 企业简介
      etexttostVal: 0, // 企业简介字数限制
      updateInfoClickTrue: false
    };
  },
  filters: {},
  created: function() {
    var accessToken = sessionStorage.getItem("accessToken");
    if (accessToken) {
      this.listFun();
    }
  },
  // watch: {
  // },
  methods: {
    listFun() {
      var self = this;
      self
        .getapiorgbookcompanyfind({
          companyId: sessionStorage.getItem("ORGID")
          // companyId:"6390097398286258176"
        })
        .then(data => {
          if (data.statusCode == 200) {
            if (data.data) {
              self.OrgOBj = data.data;
              self.nameVal = self.OrgOBj.name;
              self.easyNameVal = self.OrgOBj.shortName;
              self.numberVal = self.OrgOBj.number || "暂无";
              self.addressVal = self.OrgOBj.address;
              self.logoImgUrlVal = self.OrgOBj.orgLogo;
              self.enterImgUrlVal = self.OrgOBj.orgImage;
            }
          } else {
            self.$message({
              type: "info",
              message: data.statusMessage
            });
          }
        })
        .catch(msg => {
          self.$message({
            type: "info",
            message: "服务器异常"
          });
        });
    },
    //选择logo图片
    fileChange(e) {
      var self = this;
      var files = e.target.files || e.dataTransfer.files;
      var fileData = files[0];
      var reader = new FileReader();
      reader.onload = function(e) {
        var data = e.target.result;
        var image = new Image();
        image.onload = function() {
          if (image.width !== 640 || image.height !== 640) {
            self.isBlueLogoVal = true;
            self.isGrayLogoVal = false;
            self.$message({
              type: "info",
              message: "上传图片尺寸不符，请重新上传"
            });
            document.getElementById("logoFile").value = "";
          } else if (fileData.size > 1048576) {
            self.isBlueLogoVal = true;
            self.isGrayLogoVal = false;
            self.$message({
              type: "info",
              message: "上传图片大小过大，请重新上传"
            });
            document.getElementById("logoFile").value = "";
          } else {
            self.isBlueLogoVal = false;
            self.isGrayLogoVal = true;
            self.uploadImage(files[0]);
          }
          // self.uploadImage(files[0]);
        };
        image.src = data;
      };
      reader.readAsDataURL(fileData);
    },
    //上传logo图片
    uploadImage(file) {
      var self = this;
      var formdata = new FormData();
      formdata.append("file", file);
      formdata.append("appKey", 111111);
      formdata.append("ext", file.name.split(".")[1]);
      formdata.append("fileSize", file.size);
      var text = "";
      var possible =
        "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
      for (var i = 0; i < 16; i++) {
        text += possible.charAt(Math.floor(Math.random() * possible.length));
      }
      var shaCode = crypto.createHash("md5");
      var md5Str = shaCode
        .update(text, "utf-8")
        .digest("hex")
        .toUpperCase();

      formdata.append("md5", md5Str);
      self
        .getfileuploadPic(formdata)
        .then(data => {
          if (data.statusCode == 200) {
            self.$message({
              message: "上传图片成功",
              type: "success"
            });
            self.logoImgUrlVal = data.data.url;
            document.getElementById("logoFile").value = "";
          } else {
            self.$message({
              type: "info",
              message: data.statusMessage
            });
            document.getElementById("logoFile").value = "";
          }
        })
        .catch(msg => {
          document.getElementById("logoFile").value = "";
          self.$message({
            type: "info",
            message: "服务器异常"
          });
        });
    },
    //选择banner图片
    bannerChange(e) {
      var self = this;
      var files = e.target.files || e.dataTransfer.files;
      var fileData = files[0];
      var reader = new FileReader();
      reader.onload = function(e) {
        var data = e.target.result;
        var image = new Image();
        image.onload = function() {
          if (image.width !== 640 || image.height !== 640) {
            self.isBlueBannerVal = true;
            self.isGrayBannerVal = false;
            self.$message({
              type: "info",
              message: "上传图片尺寸不符，请重新上传"
            });
            document.getElementById("bannerlogofile").value = "";
          } else if (fileData.size > 1048576) {
            self.isBlueBannerVal = true;
            self.isGrayBannerVal = false;
            self.$message({
              type: "info",
              message: "上传图片大小过大，请重新上传"
            });
            document.getElementById("bannerlogofile").value = "";
          } else {
            self.isBlueBannerVal = false;
            self.isGrayBannerVal = true;
            self.uploadBanner(files[0]);
          }
          // self.uploadBanner(files[0]);
        };
        image.src = data;
      };
      reader.readAsDataURL(fileData);
    },
    //上传banner图片
    uploadBanner(file) {
      var self = this;
      var formdata = new FormData();
      formdata.append("file", file);
      formdata.append("appKey", 111111);
      formdata.append("ext", file.name.split(".")[1]);
      formdata.append("fileSize", file.size);
      var text = "";
      var possible =
        "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
      for (var i = 0; i < 16; i++) {
        text += possible.charAt(Math.floor(Math.random() * possible.length));
      }
      var shaCode = crypto.createHash("md5");
      var md5Str = shaCode
        .update(text, "utf-8")
        .digest("hex")
        .toUpperCase();
      formdata.append("md5", md5Str);
      self
        .getfileuploadPic(formdata)
        .then(data => {
          if (data.statusCode == 200) {
            self.$message({
              message: "上传图片成功",
              type: "success"
            });
            self.enterImgUrlVal = data.data.url;
            document.getElementById("bannerlogofile").value = "";
          } else {
            self.$message({
              type: "info",
              message: data.statusMessage
            });
            document.getElementById("bannerlogofile").value = "";
          }
        })
        .catch(msg => {
          document.getElementById("bannerlogofile").value = "";
          self.$message({
            type: "info",
            message: "服务器异常"
          });
        });
    },
    //保存
    updateInfoClick() {
      var self = this;
      // console.log(1);
      self.OrgOBj.companyName = self.nameVal;
      self.OrgOBj.shortName = self.easyNameVal;
      self.OrgOBj.number = self.numberVal;
      self.OrgOBj.address = self.addressVal;
      self.OrgOBj.orgLogo = self.logoImgUrlVal;
      self.OrgOBj.orgImage = self.enterImgUrlVal;
      delete self.OrgOBj.orgType;
      delete self.OrgOBj.name;
      delete self.OrgOBj.createTime;
      var vFunTrue = self.vFun();
      // var vFunTrue=true;
      if (vFunTrue == true) {
        if (self.updateInfoClickTrue == false) {
          self.updateInfoClickTrue = true;
          self
            .getapiorgbookcompanymodify(JSON.stringify(self.OrgOBj))
            .then(data => {
              self.updateInfoClickTrue = false;
              if (data.statusCode == 200) {
                self.$message({
                  type: "success",
                  message: "保存成功"
                });
                sessionStorage.setItem("ORGName", self.nameVal);
              } else {
                self.$message({
                  type: "info",
                  message: data.statusMessage
                });
              }
            })
            .catch(msg => {
              self.updateInfoClickTrue = false;
              self.$message({
                type: "info",
                message: "服务器异常"
              });
            });
        }
      }
    },
    //验证
    vFun() {
      var self = this;
      //企业名称验证
      var strReg = new RegExp(/^[A-Za-z0-9\u4e00-\u9fa5]{1,50}$/);
      if (strReg.test(self.nameVal) == false) {
        this.isGrayNameVal = false;
        this.isBlueNameVal = true;
      } else {
        this.isGrayNameVal = true;
        this.isBlueNameVal = false;
      }
      //企业简称验证
      var strReg = new RegExp(/^[\u4e00-\u9fa5]{1,10}$/);
      if (this.easyNameVal) {
        if (strReg.test(self.easyNameVal) == false) {
          this.isGrayEasyVal = false;
          this.isBlueEasyVal = true;
        } else {
          this.isGrayEasyVal = true;
          this.isBlueEasyVal = false;
        }
      } else {
        this.isGrayEasyVal = false;
        this.isBlueEasyVal = true;
      }

      //企业电话验证
      var strReg = new RegExp(/^(\d{8}|\d{11})$/);
      if (strReg.test(self.numberVal) == false) {
        this.isGrayNumVal = false;
        this.isBlueNumVal = true;
      } else {
        this.isGrayNumVal = true;
        this.isBlueNumVal = false;
      }
      //企业地址验证
      if (self.addressVal) {
        if (self.addressVal.length > 0) {
          this.isGrayAddVal = true;
          this.isBlueAddVal = false;
        } else {
          this.isGrayAddVal = false;
          this.isBlueAddVal = true;
        }
      } else {
        this.isGrayAddVal = false;
        this.isBlueAddVal = true;
      }
      //logo图片验证
      if (self.logoImgUrlVal != "/static/img/默认图片.png") {
        if (self.logoImgUrlVal.indexOf("http") > -1) {
          this.isBlueLogoVal = false;
          this.isGrayLogoVal = true;
        } else {
          this.isBlueLogoVal = true;
          this.isGrayLogoVal = false;
        }
      } else {
        this.isBlueLogoVal = true;
        this.isGrayLogoVal = false;
      }
      //banner图片验证
      if (self.enterImgUrlVal != "/static/img/默认图片.png") {
        if (self.enterImgUrlVal.indexOf("http") > -1) {
          this.isBlueBannerVal = false;
          this.isGrayBannerVal = true;
        } else {
          this.isBlueBannerVal = true;
          this.isGrayBannerVal = false;
        }
      } else {
        this.isBlueBannerVal = true;
        this.isGrayBannerVal = false;
      }
      var returnTrue = false;
      if (
        this.isBlueNameVal == false &&
        this.isBlueEasyVal == false &&
        this.isBlueNumVal == false &&
        this.isBlueAddVal == false &&
        this.isBlueBannerVal == false &&
        this.isBlueLogoVal == false
      ) {
        returnTrue = true;
      } else {
        returnTrue = false;
      }
      return returnTrue;
    },
    ...mapActions([
      "getfileuploadPic",
      "getapiorgbookcompanymodify",
      "getapiorgbookcompanyfind"
    ])
  },
  watch: {
    nameVal(val) {
      if (val) {
        // console.log(val);
        var strReg = new RegExp(/^[A-Za-z0-9\u4e00-\u9fa5]{1,50}$/);
        if (strReg.test(val) == false) {
          this.isGrayNameVal = false;
          this.isBlueNameVal = true;
        } else {
          this.isGrayNameVal = true;
          this.isBlueNameVal = false;
        }
      } else {
        this.isGrayNameVal = false;
        this.isBlueNameVal = true;
      }
    },
    easyNameVal(val) {
      if (val) {
        var strReg = new RegExp(/^[\u4e00-\u9fa5]{1,10}$/);
        if (strReg.test(val) == false) {
          this.isGrayEasyVal = false;
          this.isBlueEasyVal = true;
        } else {
          this.isGrayEasyVal = true;
          this.isBlueEasyVal = false;
        }
      } else {
        this.isGrayEasyVal = false;
        this.isBlueEasyVal = true;
      }
    },
    numberVal(val) {
      if (val) {
        var strReg = new RegExp(/^(\d{8}|\d{11})$/);
        if (strReg.test(val) == false) {
          this.isGrayNumVal = false;
          this.isBlueNumVal = true;
        } else {
          this.isGrayNumVal = true;
          this.isBlueNumVal = false;
        }
      } else {
        this.isGrayNumVal = false;
        this.isBlueNumVal = true;
      }
    },
    addressVal(val) {
      if (val) {
        if (val.length > 0) {
          this.isGrayAddVal = true;
          this.isBlueAddVal = false;
        } else {
          this.isGrayAddVal = false;
          this.isBlueAddVal = true;
        }
      } else {
        this.isGrayAddVal = false;
        this.isBlueAddVal = true;
      }
    }
  }
};
</script>
<style scoped>
.enterpriseLi-but > div {
  margin-left: 110px;
}
.enterpriseLi-but {
  width: 100%;
  margin-bottom: 50px;
  margin-top: 30px !important;
}
.e-l-r-tiem {
  width: 100%;
  margin-top: 8px;
  /* border: 1px solid red; */
  height: 45px;
  display: flex;
}
.e-l-r-tiem > div:nth-child(2) {
  margin-left: 10px;
}
.redBorder {
  border: 1px solid #ff5f57;
}
.e-l-r-top {
  width: 100%;
  font-size: 12px;
  height: 15px;
  line-height: 15px;
  color: #333;
}
.e-l-r-bot {
  width: 100%;
  margin-top: 8px;
}
.e-l-r-bot input {
  height: 34px;
  border: 1px solid #d9d9d9;
  border-radius: 5px;
  width: 550px;
  padding-left: 10px;
}
.enterpriseLi-link .enterpriseLi-right {
  min-height: 60px;
  min-width: 500px;
  /* border: 1px solid red; */
  overflow: hidden;
}
.e-l-r-left {
  width: 80px;
  height: 80px;
  border-radius: 5px;
  overflow: hidden;
  border: 1px solid #e4eaf0;
}
.e-l-r-left img {
  width: 100%;
  height: 100%;
}
.logoTost {
  position: absolute;
  font-size: 12px;

  bottom: 5px;
  left: 0;
}
.grayText {
  color: #8f8e94 !important;
}
.blueText {
  color: #38adff !important;
}
.e-l-r-right {
  position: relative;
  display: flex;
  height: 80px;
  align-items: center;
  margin-left: 28px;
  width: 400px;
}
.e-l-r-right label {
  width: 80px;
  border-radius: 4px;
  cursor: pointer;
  height: 32px;
  background-color: #38adff;
  line-height: 30px;
  color: #fff;
  text-align: center;
  margin-bottom: 15px;
}
.e-l-r-right label:hover {
  background-color: #308bcc;
}
.e-l-r-right input {
  width: 0px;
  height: 1px;
  overflow: hidden;
  display: block;
  display: none;
}
.enterpriseLi-logo {
  width: 92%;
  align-items: center;
  height: 83px;
}
.enterpriseLi-logo .enterpriseLi-left {
  height: 80px;
  line-height: 35px;
  width: 97px;
}
.enterpriseLi-logo .enterpriseLi-right {
  height: 80px;
  display: flex;
  align-items: center;
}
.enterpriseLi-text textarea {
  border: 1px solid #d9d9d9;
  border-radius: 5px;
  width: 550px;
  padding-left: 10px;
  height: 100px;
  padding-top: 5px;
  resize: none;
  font-size: 14px;
  line-height: 20.44px;
}
.enterpriseLi-text .enterpriseLi-left {
  height: 120px;
  line-height: 35px;
}
.enterpriseLi-text .enterpriseLi-right {
  position: relative;
}
.etext-tost {
  position: absolute;
  z-index: 1000;
  right: 32px;
  bottom: 8px;
  color: red;
  font-size: 12px;
}

.enterpriseLi-text {
  width: 91%;
  align-items: center;
  height: 120px;
}
.enterpriseLi-name input {
  height: 34px;
  /* border: 1px solid #d9d9d9; */
  border-radius: 5px;
  width: 550px;
  padding-left: 10px;
}
.grayBorder {
  border: 1px solid #d9d9d9 !important;
}
.blueBorder {
  border: 1px solid #38adff !important;
}
.enterpriseLi-right {
  margin-left: 15px;
  width: 590px;
}
.enterpriseLi-left {
  width: 90px;
  font-size: 14px;
  text-align: right;
}
.enterpriseLi-name small {
  color: red;
}
small {
  color: red;
}
.install-main .enterpriseLi-name {
  width: 91%;
  height: 37px;
  margin-top: 10px;
  align-items: center;
}
.install-main ul li {
  width: 91%;
  /* border: 1px solid red; */
  margin-top: 25px;
  min-height: 30px;
  display: flex;
  overflow: hidden;
}
.install-main {
  min-height: 70px;
  width: 100%;
}
.install-main ul {
  display: flex;
  align-items: center;
  flex-direction: column;
}
.install-title {
  height: 80px;
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: center;
}
.install-title > div {
  width: 91%;
  background-color: rgba(56, 173, 255, 0.2);
  height: 40px;
  line-height: 40px;
  font-size: 14px;
  color: #000;
  padding-left: 15px;
}

.enterprise {
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  width: 100%;
  min-height: 700px;
}
.inputTips {
  margin-left: -400px;
  margin-top: 10px;
}
.numberTips {
  margin-left: -360px;
  margin-top: 10px;
}
.addressTips {
  margin-left: -480px;
  margin-top: 10px;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
input[type="number"] {
  -moz-appearance: textfield;
}
</style>